<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Confirm Validation Widget</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />

<link href="../../widgets/passwordvalidation/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
<script src="../../widgets/passwordvalidation/SpryValidationPassword.js" type="text/javascript"></script>
<link href="../../widgets/confirmvalidation/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
<script src="../../widgets/confirmvalidation/SpryValidationConfirm.js" type="text/javascript"></script>
<script src="../../widgets/textfieldvalidation/SpryValidationTextField.js" type="text/javascript"></script>
<link href="../../widgets/textfieldvalidation/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.tablecontainer {
	width:540px;
}
.tablecell input {
	width:150px;
}
.tablecell {
	width:33%;
	float:left;
	height:60px;
}
.tablecell {
	width:33%;
	float:left;
	height:60px;
}
.submitContainer {
	clear:both;
}
.container {
	clear:both;
}
label {
	display:block;
	margin-bottom:7px;
}
td {
	vertical-align:bottom;
	padding:2px;
}
#spryconfirm7.confirmRequiredState .confirmRequiredMsg, #spryconfirm7.confirmInvalidState .confirmInvalidMsg {
	display:inline;
	color:#0033CC;
	border:1px blue solid;
}
#sytle_err.confirmRequiredState .errors, #sytle_err.confirmInvalidState .errors {
	font-size: 14px;
	color: #0033CC;
	font-weight: bold;
}
.tablecell1 {
	width:33%;
	float:left;
	height:60px;
}
</style>
</head>
<body>
<h3>Spry Confirm Validation Samples</h3>
<p>This page provides examples of the Spry Confirm Validation widget capabilities.</p>
<hr />
<!--

	First Example - Different validation moments - Change, Blur, Submit

-->
<p>In the first example, there is a Confirm widget for each password widget field. The confirm  widget verifies that the entered value for the password widget is the same as the value in the confirm password field. The validation event can be 'onChange' - this means the validation will be triggered as you type, or 'onBlur' - when the password field loses focus and lastly, ' onSubmit' - when the form is submitted. By default, all Spry Validation widgets validate onSubmit. 'onBlur' and 'onChange' are options.</p>
<form id="form1" name="form1" method="get" action="ConfirmValidationSample.html">
  <div class="tablecontainer">
    <div class="tablecell">
      <label for="password1">Change - Submit</label>
      <span id="sprypassword1"> Password
      <input type="password" name="password1" id="password1" />
      <br/>
      <span class="passwordRequiredMsg">A value is required.</span> </span> </div>
    <div class="tablecell">
      <label for="password2">Blur - Submit</label>
      <span id="sprypassword2"> Password
      <input type="password" name="password2" id="password2" />
      <br/>
      <span class="passwordRequiredMsg">A value is required.</span> </span> </div>
    <div class="tablecell">
      <label for="password3">Submit</label>
      <span id="sprypassword3"> Password
      <input type="password" name="password3" id="password3" />
      <br/>
      <span class="passwordRequiredMsg">A value is required.</span> </span> </div>
    <div style="float:left;" class="tablecell"> <span id="spryconfirm1"><br/>
      Confirm Password
      <input type="password" name="confirm" id="confirm" />
      <br/>
      <span class="confirmRequiredMsg">A value is required.</span> <span class="confirmInvalidMsg">The values don't match</span> </span> </div>
    <div class="tablecell"> <span id="spryconfirm2"><br/>
      Confirm password
      <input type="password" name="confirm2" id="confirm2" />
      <br/>
      <span class="confirmRequiredMsg">A value is required.</span> <span class="confirmInvalidMsg">The values don't match</span> </span> </div>
    <div class="tablecell"> <span id="spryconfirm3"><br/>
      Confirm Password
      <input type="password" name="confirm3" id="confirm3" />
      <br/>
      <span class="confirmRequiredMsg">A value is required.</span> <span class="confirmInvalidMsg">The values don't match</span> </span> </div>
  </div>
  <div class="submitContainer">
    <input type="submit" name="submit1" id="submit1" value="Submit" />
    <hr />
  </div>
</form>
<script type="text/javascript">

	var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1",{validateOn:["change"]});
	var sprypassword2 = new Spry.Widget.ValidationPassword("sprypassword2",{validateOn:["blur"]});
	var sprypassword3 = new Spry.Widget.ValidationPassword("sprypassword3");
	var spryconf1 = new Spry.Widget.ValidationConfirm("spryconfirm1", "sprypassword1", {validateOn: ['change']});
	var spryconf2 = new Spry.Widget.ValidationConfirm("spryconfirm2", "sprypassword2", {validateOn: ['blur']});
	var spryconf3 = new Spry.Widget.ValidationConfirm("spryconfirm3", "sprypassword3");
</script>
<!--

	Second Example - min max number of characters

-->
<p>The Confirm widget can be applied to a normal input field, so you can verify if the values from the two different text fields are identical. The following example shows how to verify if the email address is the identical between the two fields.</p>
<form id="form4" name="form4" method="get" action="ConfirmValidationSample.html">
  <table>
    <tr>
      <td><label for="text1">Email:</label></td>
      <td><input type="text" name="text1" id="text1" />
        Enter an email address. </td>
    </tr>
    <tr>
      <td><label for="confirm4">Confirm Email: </label></td>
      <td><span id="spryconfirm4">
        <input type="text" name="confirm4" id="confirm4" />
        Re-enter your email address
         <span class="confirmRequiredMsg">A value is required.</span> 
         <span class="confirmInvalidMsg">The values don't match</span> 
      </span> </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="submit6" id="submit6" value="Submit" />
      </td>
    </tr>
  </table>
  <hr/>
</form>
<p>The following example shows a Textfield Validation widget to which is attached a Confirm validation widget that verifies that the two emails entered are identical. The textfiled widget is using the email format. </p>
<script type="text/javascript">
	var spryconf1 = new Spry.Widget.ValidationConfirm("spryconfirm4", "text1", {validateOn: ['blur']});
  </script>
<form id="form41" name="form41" method="get" action="ConfirmValidationSample.html">
  <table>
    <tr>
      <td><label for="text2">Email:</label></td>
      <td>
      	<span id="sprytextfield1">
        <input type="text" name="text2" id="text2" />
        Enter an email address.
         <span class="textfieldRequiredMsg">A value is required.</span> 
         <span class="textfieldInvalidFormatMsg">Invalid format.</span>
     </span> </td>
    </tr>
    <tr>
      <td><label for="confirm5">Confirm Email:</label></td>
      <td><span id="spryconfirm5">
        <input type="text" name="confirm5" id="confirm5" />
        Re-enter your email address <span class="confirmRequiredMsg">A value is required.</span> <span class="confirmInvalidMsg">The values don't match</span> </span> </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="submit61" id="submit61" value="Submit" />
      </td>
    </tr>
  </table>
  <hr/>
</form>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "email", {validateOn:["blur"]});
var spryconf2 = new Spry.Widget.ValidationConfirm("spryconfirm5", "sprytextfield1", {validateOn: ['blur']});
//-->
    </script>
<p>To provide more details to the user, you can add an additional error message for it.
  The example below shows how to set an additonal error message to the Confirm widget. The password field is a normal input field with type set on password.</p>
<form id="form5" name="form5" method="get" action="ConfirmValidationSample.html">
  <table>
    <tr>
      <td><label for="password_confirm">Password: </label></td>
      <td><input type="password" name="password_confirm" id="password_confirm" />
      </td>
    </tr>
    <tr>
      <td><label for="confirm6">Confirm Password: </label></td>
      <td><span id="spryconfirm6">
        <input type="password" name="confirm6" id="confirm6" />
        <span class="confirmRequiredMsg">A value is required.</span> <span class="confirmInvalidMsg">The values don't match</span> </span> </td>
    </tr>
    <tr>
      <td>Errors:</td>
      <td><span id="additionalErrorZone"> <span class="confirmRequiredMsg">You must enter a password!</span> <span class="confirmInvalidMsg">The form will not be submitted untill the Password and Confirm Password fields have the same values.</span> </span> </td>
    </tr>
  </table>
  <div class="submitContainer">
    <input type="submit" name="submit7" id="submit7" value="Submit" />
  </div>
</form>
<script type="text/javascript">
	var spryconf6 = new Spry.Widget.ValidationConfirm("spryconfirm6", "password_confirm", {validateOn: ['blur'],additionalError:'additionalErrorZone'});
</script>
<hr />
<p>The following example shows how to change the default appeareance for error messages.
  Spry overwrites the default CSS classes
  for error messages by adding  new 
  properties 
  for these classes. In this  example, the error message color should be blue.</p>
<form id="form6" name="form6" method="get" action="ConfirmValidationSample.html">
  <table>
    <tr>
      <td><label for="password_style">Password: </label></td>
      <td><input type="password" name="password_style" id="password_style" /></td>
    </tr>
    <tr>
      <td><label for="confirm7" id="err_confirm">Confirm Password: </label></td>
      <td><span id="spryconfirm7">
        <input type="password" name="confirm7" id="confirm7" />
        <span class="confirmRequiredMsg">A value is required.</span> <span class="confirmInvalidMsg">The values don't match</span> </span> </td>
    </tr>
  </table>
  <div class="submitContainer">
    <input type="submit" name="submit71" id="submit71" value="Submit" />
  </div>
</form>
<script type="text/javascript">
	var spryconfirm7 = new Spry.Widget.ValidationConfirm("spryconfirm7", "password_style", {validateOn: ['blur']});
    </script>
<p>You can also change the widget container to use  the textfield label tag as anerror message.</p>
<form id="form61" name="form61" method="get" action="ConfirmValidationSample.html">
  <table>
    <tr>
      <td><label for="pwd">Password: </label></td>
      <td><input type="password" name="pwd_confirm" id="pwd" /></td>
    </tr>
    <tr id="sytle_err">
      <td><label for="confirm8" class="errors">Confirm Password: </label></td>
      <td><input type="password" name="confirm8" id="confirm8" />
      </td>
    </tr>
  </table>
  <div class="submitContainer">
    <input type="submit" name="submit8" id="submit8" value="Submit" />
    <hr />
  </div>
</form>
<script type="text/javascript">
var spryconfirm8= new Spry.Widget.ValidationConfirm("sytle_err", "pwd", {validateOn: ['blur']});
    </script>
</body>
</html>
